import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router'
import { List, Carousel } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

// widget 
import Loading from '../../Common/Loading'
import HomeHot from './HomeHot';

const NAVS = [{
	img: require('../../../assets/home/category.png'),
	link: '/category',
	text: '分类',
	color: '#E4010E'
}, {
	img: require('../../../assets/home/brand.png'),
	link: '/category?tab=pinpai',
	text: '品牌',
	color: '#31BD80'
}, {
	img: require('../../../assets/home/activity.png'),
	link: '/',
	text: '活动',
	color: '#F6296F'
}, {
	img: require('../../../assets/home/sale.png'),
	link: '/',
	text: '今日特价',
	color: '#FF7D00'
}]

class HomeBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	// docked: false
        }
    }
    componentDidMount() {
    	const { dispatch } = this.props
    	
    	dispatch({type: 'meyley/fetchAds'})
    }
    onDock(d) {
	    this.setState({
	      [d]: !this.state[d],
	    });
	}
	render() {
		const { meyley } = this.props
	 	return (
	 		<div className={`${styles['home-body']} home-body`}>
		      	{
		      		meyley.adList && meyley.adList.length > 0 ? (<Carousel
				        className={styles['home-body-carousel']}
				        autoplay={false} 
				        infinite
				      >
				      	{
				      		meyley.adList.map((ad, ii) => {
					      		return <a href={ad.adLink} key={ii} className={styles['home-body-carousel-img-wrap']}>
					      				<img className={styles['home-body-carousel-img']} src={ad.adPic} />
					      			</a>
					      	})
				      	}
				    </Carousel>) : <Loading className={styles['home-body-carousel-loading']}/>
		      	}
		        
			    <div className={styles['home-body-nav']}>
			    {
			    	NAVS.map((nav, k) => {
			    		return (<div key={k} className={styles['home-body-nav-item']}>
				    				<Link to={nav.link}>
					    				<span className={styles['home-body-nav-item-icon']} style={{background: nav.color}}>
					    					<img style={{width: '0.8rem', height: '0.8rem'}} src={nav.img} />
					    				</span>
					    				<span style={{marginTop: '0.08rem', display: 'block', color: '#616161', fontSize: '0.26rem', textAlign: 'center'}}>
					    				{nav.text}
					    				</span>
				    				</Link>
			    				</div>)
			    	})
			    }
			    </div>

			    <HomeHot {...this.props} />
	 		</div>
	  	);
	}
};

HomeBody.propTypes = {
};

export default HomeBody
